<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>ToolBar</title>

<link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/esri/css/esri.css">
<style>
    html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #draw{
        height: 38px;
    }
    input{
        height: 30px;
        margin:0;
        font-family: "微软雅黑";
    }

</style>

<script src="/javascripts/arcgis_js_api/library/3.16/3.16/init.js"></script>
<script src="/javascripts/arcgis_js_api/library/3.16/3.16/esri/layers/layer.js"></script>
<script>
    var map, toolbar,myLayer;

    require([
                "esri/map",
                "esri/toolbars/draw",
                "esri/graphic",

                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",

                "dojo/parser", "dijit/registry",
                "esri/dijit/editing/Editor",
                "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
            ],
            function(
                    Map, Draw, Graphic,
                    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                    parser, registry, Editor
            ) {
            map = new Map("map", {
//                 "streets" | "satellite" | "hybrid" | "topo" | "gray"
//                    | "dark-gray" | "oceans" | "national-geographic" | "terrain" | "osm"
//                    | "dark-gray-vector" | "gray-vector" | "streets-vector" |
//                    "streets-night-vector" | "streets-relief-vector" | "streets-navigation-vector"
//                    | "topo-vector"
                basemap: "streets",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
                center: [106.45, 30.75],// longitude, latitude
                nav:false,//8个pan 箭头
                slider:false,//左上的缩放 +/-;
                logo:true,//右下的esri logo
                showAttribution:true,//右下的gisNeu (logo左侧)
                zoom: 6
            });
//            myLayer=new ArcGISTiledMapServiceLayer("http://192.168.1.157:8399/arcgis/rest/services/changjiang/basin/MapServer");
//            map.addLayer(myLayer);
            map.on("load",createDraw);
            function createDraw(){
                toolbar = new Draw(map);
                toolbar.on("draw-end", addToMap);
            }
                map.on("click",function(e){
                console.log(e.mapPoint);
            });

            var oButton = document.getElementById("draw").getElementsByTagName("input");
            for (var i = oButton.length - 1; i >= 0; i--) {
                oButton[i].onclick = function activateTool(){
                    var tool = this.value.toUpperCase();
                    toolbar.activate(Draw[tool]);
                    map.hideZoomSlider();
                }
            }
            function addToMap(evt) {
                var symbol;
                toolbar.deactivate();
                map.showZoomSlider();
                switch (evt.geometry.type) {
                    case "point":
                    case "multipoint":
                        symbol = new SimpleMarkerSymbol();
                        break;
                    case "polyline":
                        symbol = new SimpleLineSymbol();
                        break;
                    default:
                        symbol = new SimpleFillSymbol();
                        break;
                }
                console.log(evt.geometry);
                var graphic = new Graphic(evt.geometry, symbol);
                map.graphics.add(graphic);
            }

    });


</script>
</head>

<body>
<div id="map">
    <div id="draw">
        <input type="button" value="Point">
        <input type="button" value="Multi_Point">
        <input type="button" value="Line">
        <input type="button" value="Polyline">
        <input type="button" value="FreeHand_Polyline">
        <input type="button" value="FreeHand_Polygon">
        <input type="button" value="Polygon">
        <input type="button" value="RIGHT_ARROW">

    </div>
</div>
</body>
</html>